<template>
  <el-space
    v-if="list.length"
    direction="horizontal"
    :size="5"
    class="box"
  >
    <el-tag
      v-for="(tag, index) in list"
      :key="tag.name"
      class="mx-1 pointer"
      closable
      :type="tag.type"
      @click="turnTo(tag)"
      @close="handleClose(index)"
    >
      {{ tag.name }}
    </el-tag>
  </el-space>
</template>

<script lang="ts" setup>
import { commonStore } from '@/store'
import { locSet } from '@/utils/common'
import { routerTo } from '@/utils/router'
import { cloneDeep } from 'lodash-es'
const store = commonStore()
const router = useRouter()
const route = useRoute()
const list = computed(() => {
  const quickNavData = store.quickNavData
  for (const item of quickNavData) {
    item.type = route.path === item.path ? 'success' : 'info'
  }
  return quickNavData
})
const handleClose = (index: number) => {
  const quickNavData = cloneDeep(store.quickNavData)
  if (quickNavData[index].type === 'success') {
    if (quickNavData.length > 1) {
      const i = index ? index - 1 : index + 1
      quickNavData[i].type = 'success'
      const path = quickNavData[i].path
      router.push({ path })
    }
    quickNavData.splice(index, 1)
    locSet('quickNavData', quickNavData)
    store.$patch({
      quickNavData,
    })
  } else {
    store.delBreadcrumb(index)
  }
}
const turnTo = (tag: { path: string }) => {
  const { path } = tag
  routerTo({ path }, { isKeepAlive: true })
}
</script>
<style lang="scss" scoped>
.box {
  overflow-x: scroll;
  padding: 4px 2px 2px;
  width: 100%;
}
</style>
